<template>
	<view>
		<view class="top">
			<view
				class="titleBox"
				style="	height: 90rpx;
	display: flex;
	line-height: 110rpx;
	font-size: 24rpx;
	position: relative;
	.titleReturn{
		position: absolute;
		left: 18rpx;"
			>
				<view class="titleReturn">
					<uni-icons custom-prefix="iconfont" type="icon-xiangzuojiantou" style="font-size: 35rpx; margin-left: 10rpx" size="10"></uni-icons>
					返回
				</view>
				<view class="titleText" style="position: absolute; left: 50%; transform: translateX(-50%)">报修记录</view>
			</view>

			<view class="buttom">
				<view class="itemm" style="color: #0080fe">未处理</view>
				<view class="itemm">已处理</view>
				<view class="itemm">全部</view>
			</view>
		</view>

		<view style="padding-bottom: 30rpx">
			<view class="item" @click="jup">
				<view class="center">
					<view class="top">公共区域有人随意占用，请物管及时.家里墙体有裂纹，请物管及时排工人..</view>
					<view class="centent">
						<view class="centent_top">
							<image src="/static/image/baoxiu1.png" mode=""></image>
							<image src="/static/image/baoxiu2.png" mode=""></image>
							<image src="/static/image/baoxiu1.png" mode=""></image>
						</view>
						<view class="centent_buttom">
							<view class="centent_buttom_left">清水湾1楼1单元2208</view>
							<view class="centent_buttom_right">水管漏水</view>
						</view>
					</view>
					<view class="buttom">
						<view class="buttom_left" style="font-size: 25rpx">2021-10-2010:20</view>
						<view class="buttom_right">
							<view style="border: 0.1rpx solid #666666; color: #666666; font-size: 25rpx">未处理</view>
							<view style="background-color: #01a2f2; color: #fff; font-size: 25rpx">撤销</view>
						</view>
					</view>
				</view>
			</view>

			<view class="item">
				<view class="center">
					<view class="top">公共区域有人随意占用，请物管及时.家里墙体有裂纹，请物管及时排工人..</view>
					<view class="centent">
						<view class="centent_top">
							<image src="/static/image/baoxiu1.png" mode=""></image>
							<image src="/static/image/baoxiu2.png" mode=""></image>
							<image src="/static/image/baoxiu1.png" mode=""></image>
						</view>
						<view class="centent_buttom">
							<view class="centent_buttom_left">清水湾1楼1单元2208</view>
							<view class="centent_buttom_right">水管漏水</view>
						</view>
					</view>
					<view class="buttom">
						<view class="buttom_left">2021-10-2010:20</view>
						<view class="buttom_right">
							<view style="border: 0.1rpx solid #666666; color: #666666">未处理</view>
							<view style="background-color: #01a2f2; color: #fff">撤销</view>
						</view>
					</view>
				</view>
			</view>

			<view class="item">
				<view class="center">
					<view class="top">公共区域有人随意占用，请物管及时.家里墙体有裂纹，请物管及时排工人..</view>
					<view class="centent">
						<view class="centent_top">
							<image src="/static/image/baoxiu1.png" mode=""></image>
							<image src="/static/image/baoxiu2.png" mode=""></image>
							<image src="/static/image/baoxiu1.png" mode=""></image>
						</view>
						<view class="centent_buttom">
							<view class="centent_buttom_left">清水湾1楼1单元2208</view>
							<view class="centent_buttom_right">水管漏水</view>
						</view>
					</view>
					<view class="buttom">
						<view class="buttom_left">2021-10-2010:20</view>
						<view class="buttom_right">
							<view style="border: 0.1rpx solid #666666; color: #666666">未处理</view>
							<view style="background-color: #01a2f2; color: #fff">撤销</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		jup() {
			uni.navigateTo({
				url: '/pages/pagesbusiness/problemparticulars/problemparticulars'
			});
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #f0f0f0;
}

.top {
	width: 100%;
	height: 200rpx;
	background-color: #fff;

	.buttom {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		font-size: 29rpx;

		.itemm {
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
	}
}

.item {
	height: 550rpx;
	background-color: #fff;
	// border: 1px solid #000;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20rpx;
	// margin-bottom: 20rpx;
	// padding-bottom: 20rpx;

	.center {
		width: 85%;
		height: 85%;

		.top {
			width: 100%;
			height: 90rpx;

			font-size: 25rpx;
			line-height: 40rpx;
		}

		.centent {
			width: 100%;
			height: 270rpx;

			.centent_top {
				width: 100%;
				height: 190rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				image {
					// width: 150rpx;
					height: 130rpx;
					margin-left: 10rpx;
				}
			}

			.centent_buttom {
				width: 95%;
				height: 75rpx;
				display: flex;
				line-height: 75rpx;
				margin-left: 20rpx;
				color: #666666;

				.centent_buttom_left {
					width: 60%;
					height: 100%;
					font-size: 25rpx;
				}

				.centent_buttom_right {
					width: 40%;
					height: 100%;
					text-align: right;
					font-size: 25rpx;
				}
			}
		}

		.buttom {
			width: 95%;
			height: 75rpx;
			display: flex;
			margin-left: 20rpx;
			// background-color: #666666;
			display: flex;
			justify-content: space-between;
			border-top: 1rpx solid #f0f0f0;
			line-height: 90rpx;
			font-size: 25rpx;

			.buttom_left {
				width: 50%;
				height: 90rpx;
				font-size: 25rpx;
			}

			.buttom_right {
				height: 80rpx;
				margin-left: 20rpx;
				margin-top: 25rpx;
				text-align: right;

				// background-color: antiquewhite;
				display: flex;
				justify-content: space-between;

				view {
					width: 100rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					border-radius: 10rpx;
					margin-left: 20rpx;
					font-size: 25rpx;
				}
			}
		}
	}
}
</style>
